<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id="app">
        <div>
            搜索：<input type="text" v-model="search">
        </div>
        <ul>
            <li v-for="item in newMusic" key="item.id">歌曲名：{{item.name}} --- 歌手：{{item.auth}} --- 点击量：{{item.point}}
            </li>
        </ul>
    </div>
    <script>
        /* 设置为 false 以阻止 vue 在启动时生成生产提示 */
        Vue.config.productionTip = false;
        //实例化Vue
        const vm = new Vue({
            //el代表的是容器,值是一个选择器或者是一个元素,一般使用id(因为id是唯一的)
            el: "#app",
            //data必须声明为返回一个初始数据对象的函数,因为数组可能被用来创建多个实例.如果data仍然是一个存粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data函数,每次创建一个新实例后,我们能够调用data函数,从而返回初始数据的一个全新副本数据对象
            data() {
                return {
                    music: [{
                        id: "001",
                        name: "不想追",
                        auth: "张卫健",
                        point: 54345
                    }, {
                        id: "002",
                        name: "欠你",
                        auth: "陈僖仪",
                        point: 54545
                    }, {
                        id: "003",
                        name: "分手在那个秋天",
                        auth: "吴紫涵",
                        point: 5434
                    }, {
                        id: "004",
                        name: "如果爱能早些说出来",
                        auth: "李昊瀚",
                        point: 23584
                    }, {
                        id: "005",
                        name: "故事重播",
                        auth: "谢容儿",
                        point: 48571
                    }, {
                        id: "006",
                        name: "爱的省略号",
                        auth: "沙宝亮",
                        point: 51428
                    }, {
                        id: "007",
                        name: "偶尔回忆",
                        auth: "徐誉滕",
                        point: 42158
                    }, {
                        id: "008",
                        name: "爱情转移",
                        auth: "张倩",
                        point: 36512
                    }, {
                        id: "009",
                        name: "遇见对的人",
                        auth: "许诺",
                        point: 25148
                    }, {
                        id: "010",
                        name: "无限度自由",
                        auth: "邓福如",
                        point: 125840
                    }, {
                        id: "011",
                        name: "最深的伤口",
                        auth: "大哲",
                        point: 56148
                    }, {
                        id: "012",
                        name: "降温",
                        auth: "许嵩",
                        point: 48951
                    }, {
                        id: "013",
                        name: "擦肩而过",
                        auth: "郑源",
                        point: 85462
                    }, {
                        id: "014",
                        name: "春花秋开",
                        auth: "范海荣",
                        point: 62145
                    }, {
                        id: "015",
                        name: "回忆",
                        auth: "陈瑞",
                        point: 7484
                    }, {
                        id: "016",
                        name: "白狐",
                        auth: "钮榕",
                        point: 95482
                    }, {
                        id: "017",
                        name: "我的大草原",
                        auth: "乌兰图雅",
                        point: 62514
                    }, {
                        id: "019",
                        name: "溜溜的她",
                        auth: "乌兰图雅",
                        point: 32510
                    }, {
                        id: "020",
                        name: "甘心情愿",
                        auth: "郭峰",
                        point: 74852
                    }, {
                        id: "021",
                        name: "路灯下的小姑娘",
                        auth: "杨坤",
                        point: 21548
                    }, ],
                    search: '',
                }
            },
            computed: {
                newMusic() {
                    return this.music.filter(item => item.name.includes(this.search)).sort((a, b) => b.point - a
                        .point)
                }
            }
        })
    </script>
</body>

</html>